<template>
    <!-- <client-only> -->
      <div class="messages-page">
        <div class="left">
          <div class="left-title">Messages</div>
          <div>
            <el-skeleton animated :loading="skeletonLoading" :count="3">
              <template slot='template'>
                <div class="sender-item">
                  <el-skeleton-item
                    variant="image"
                    style="width: 60px; height: 60px; border-radius: 50%; margin-right: 20px;"
                  />
                  <div class="sender-item-right">
                    <el-skeleton-item variant="text" style="margin-bottom: 12px;" />
                    <el-skeleton-item variant="text" style="width: 60%;"/>
                  </div>
                </div>
              </template>
              <template>
                <div class="sender-item"
                  :class="currSenderItem && currSenderItem.senderId === item.senderId ? 'active' : ''"
                  v-for="(item, index) in leftSenderList"
                  v-bind:key="item.senderId + index"
                  @click="senderItemClick(item)"
                >
                  <el-avatar class="sender-avatar" :src="item.avatarImage" :size="60">{{item.senderId.slice(0, 1)}}</el-avatar>
                  <div class="sender-item-right">
                    <div class="mes-item-row">
                      <div class="sender-id">{{item.senderId}}</div>
                      <div class="last-message-time">
                        {{item.messages[item.messages.length-1] ? formatCreatAt(item.messages[item.messages.length-1].createdAt) : ''}}
                      </div>
                    </div>
                    <div class="mes-item-row">
                      <div class="last-message-text">
                        {{item.messages[item.messages.length-1] ? item.messages[item.messages.length-1].message.content.data : ''}}
                      </div>
                      <div class="unread-message-num" v-if="item.unreadNumber && item.unreadNumber != 0">{{item.unreadNumber}}</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
        </div>
        <div class="right">
          <div style="display: flex;justify-content: center;align-items: center; height: 100%;"
            v-if="!currSenderItem"
          >
             <el-image
               style="width: 300px; height: 300px; opacity: 0.3;"
               :src="require('~/static/home_studio_screenwriter.png')"
               fit="contain"
             ></el-image>
          </div>
          <div class="message-view" v-if="currSenderItem">
            <div class="right-header">
              <el-avatar class="sender-avatar" :src="currSenderItem.avatarImage" :size="70">
                {{currSenderItem.senderId.slice(0, 1)}}
              </el-avatar>
              <div class="sender-item-right">
                <div class="sender-id">{{currSenderItem.senderId}}</div>
                <div class="sender-rols">{{ currSenderItem.senderRolesStr }}</div>
              </div>
            </div>
            <div class="interact-message-div" ref="messageScroll" @scroll="messageScroll">
              <div style="padding: 0px 50px 20px 50px;" v-if="currSenderMessageLength === 0">
                <el-divider>No more</el-divider>
              </div>
              <div class="interact-row"
                :class="item.message.senderId === currSenderItem.senderId ? 'other-send' : 'my-send'"
                v-for="(item, index) in currSenderItem.messages"
                v-bind:key="`${item.userMessageId}-${index}`"
              >
                <el-avatar class="sender-avatar interact" :size="50"
                  :src="item.message.senderId === currSenderItem.senderId ? currSenderItem.avatarImage : userInfo.avatarImage"
                >
                  {{item.message.senderId === currSenderItem.senderId ? item.message.senderId.slice(0, 1) : userId.slice(0, 1)}}
                </el-avatar>
                <div class="interact-row-message">
                  <div class="send-time">
                    {{item.message ? formatCreatAt(item.message.createdAt) : ''}}
                  </div>
                  <div class="send-text">{{item.message.content.data}}</div>
                </div>
              </div>
            </div>
            <div class="send-message-div">
              <div class="message-face"></div>
              <input class="message-input" placeholder="type your comment here..." v-model="myMessage" @keyup.enter="sendMessage" />
              <div class="send-btn" @click="sendMessage">Submit</div>
            </div>
          </div>
        </div>
      </div>
    <!-- </client-only> -->
  </template>
  
  <script>
  import { Message } from 'element-ui';
  import Moment from 'moment'
  export default {
    components: {},
    mounted() {
      this.socketInit();
    },
    data() {
      return {
        socket: null,
        messageList: [{"senderId":"1","createdAt":"2022-09-01T05:50:29","avatarImage":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.51qianduan.com%2Fcache%2Farticle%2F2103%2F13%2F738%2F13883.png&refer=http%3A%2F%2Fwww.51qianduan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254302&t=9ec7e2bea0877b94304aa1d2bb9a1d24","unreadNumber":10, "messages":[{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'1','senderId':'2','receiverId':'1', "createdAt":"2022-09-01T05:50:29","content":{"data":"abcdasdfasdf"}} },{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'2','senderId':'1','receiverId':'2', "createdAt":"2022-09-01T05:50:29","content":{"data":"sssss"}} }]},
                      {"senderId":"2","createdAt":"2022-09-01T05:50:29","avatarImage":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665199748&t=9811cf5d1c6f224d492a2d744f92d27a","unreadNumber":10, "messages":[{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'1','senderId':'2','receiverId':'1', "createdAt":"2022-09-01T05:50:29","content":{"data":"abcdasdfasdf"}} }]}],
        userId: 'username',
        userInfo: {"username":"miko0704d","lastname":"jjj","filmmakingSigned":true,"birthday":null,"firstname":"ddd","nickname":"miko0704d","mobile":null,"email":"abc@163.com","aboutMe":null,"avatarImage":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F01%2F20180901214613_VXdRf.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665199874&t=707941866bc05f4358c3b2bb4dff9d30","cardImage":null,"bannerImage":null,"country":null,"state":null,"city":null,"available":null,"paypalAccount":"testerv3@163.com","rating":2,"follower":2,"escapeOders":3,"accountType":"regular","activated":true,"address":null,"socialConnection":null,"followed":null,"genres":[],"roles":[{"role":"DIRECTOR"},{"role":"PRODUCER"},{"role":"SCREENWRITER"},{"role":"VIDEOEDITOR"}]} ,
        unreadMessageList: [{"senderId":"1","avatarImage":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.51qianduan.com%2Fcache%2Farticle%2F2103%2F13%2F738%2F13883.png&refer=http%3A%2F%2Fwww.51qianduan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254302&t=9ec7e2bea0877b94304aa1d2bb9a1d24","unreadNumber":11, "messages":[{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'1','senderId':'2','receiverId':'1', "createdAt":"2022-09-01T05:50:29","content":{"data":"abcdasdfasdf"}} },{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'2','senderId':'1','receiverId':'2', "createdAt":"2022-09-01T05:50:29","content":{"data":"abcdasdfasdf"}} }]},
                      {"senderId":"2","avatarImage":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665199748&t=9811cf5d1c6f224d492a2d744f92d27a","unreadNumber":12, "messages":[{"createdAt":"2022-09-01T05:50:29","message":{"userMessageId":'1','senderId':'2','receiverId':'1', "createdAt":"2022-09-01T05:50:29","content":{"data":"abcdasdfasdf"}} }]}],
        currSenderItem: null,
        myMessage: '',
        currSenderMessageLength: 1,
        skeletonLoading: true,
        fisrtSendMessgae: null,
        newMessage: null
      };
    },
  
    computed: {
      leftSenderList() {
        // Message.error(`Error prompt: Connection failed~`);
        Message.success(`sender list: computing`);
        if (!this.messageList) return [];
        const newArr = Object.values(this.messageList);
        console.log(newArr);
        console.log(this.unreadMessageList);
        this.unreadMessageList.forEach(a => {
          newArr.forEach(b => {
            if (a.senderId == b.senderId) {
              b.unreadNumber = a.unreadNumber;
            }
          });
        });
        console.log("after");
        console.log(newArr);
        return newArr;
      }
    },
  
    methods: {
      socketInit() {
        setTimeout(() => {
          this.skeletonLoading = false;
        }, 100)
        
      },
      formatCreatAt(val) {
        console.log("format:")
        console.log(val);
        if (!val || val === '') {
          return ''
        }
        return Moment(val).format('YYYY/MM/DD hh:mm:ss')
      },
  
      senderItemClick(item) {
        console.log(item);
        this.currSenderItem = item;
        this.currSenderMessageLength = 1;
        setTimeout(() => {
          this.$refs['messageScroll'].scrollTo({
            top: this.$refs['messageScroll'].scrollHeight,
            behavior: 'smooth',
          })
          // 将消息标记为已读
  
          item.unreadNumber = 0;
        }, 100)
      },
  
      messageScroll(e) {
        const {scrollTop, scrollHeight} = e.target;
        if (scrollTop === 0) {
          // 到顶部了
          if (!this.currSenderItem.nextPageId) {
            //没有数据了
            this.currSenderMessageLength = 0;
            return;
          }
        }
      },
  
      sendMessage() {
        if (!this.myMessage) return false;
        return true;
      },
      
    }
  
  }
  </script>
  
  <style lang="less" scoped>
    .messages-page {
      background-color: #f9f9f9;
      height: 90%;
      width: 90%;
      padding: 5vh 5vw;
      display: flex;
      justify-content: space-around;
      background-image: linear-gradient(to top, #e6e9f0 0%, #dddde1 100%);
      .left{
        width: 30%;
        height: 90%;
        background-color: #ffffff;
        border-radius: 16px;
        min-width: 280px;
        padding: 30px 0;
        overflow-y: auto;
        overflow: hidden;
        .left-title{
          padding: 0px 30px 20px 30px;
          font-size: 18px;
          font-weight: bold;
          color: #a7a7a7;
          border-bottom: 1px solid #f1f1f1;
        }
        .sender-item{
          display: flex;
          align-items: center;
          padding: 16px 36px;
          cursor: pointer;
          transition: all 0.3s;
          &.active{
            background-color: rgba(13, 23, 45, 0.06);
          }
          &:hover{
            background-color: rgba(13, 23, 45, 0.03);
          }
          .sender-item-right{
            width: calc(100% - 72px);
            display: flex;
            flex-direction: column;
            .mes-item-row{
              padding: 5px 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              color: #636363;
              .sender-id{
                padding-right: 12px;
                font-weight: bold;
                font-size: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .last-message-time{
                color: #b1b1b1;
                white-space: nowrap;
              }
              .last-message-text{
                padding-right: 12px;
                color: #afafaf;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .unread-message-num{
                background-color: #ff6625;
                border-radius: 4px;
                padding: 2px 10px;
                color: #ffffff;
                font-size: 12px;
              }
            }
          }
        }
      }
    
      .right{
        width: 65%;
        height: 90%;
        background-color: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        .message-view{
          width: 100%;
          height: 100%;
          .messages-page {
      background-color: #f9f9f9;
      height: 100%;
      width: 100%;
      padding: 5vh 5vw;
      display: flex;
      justify-content: space-around;
      background-image: linear-gradient(to top, #e6e9f0 0%, #dddde1 100%);
      .left{
        width: 30%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 16px;
        min-width: 280px;
        padding: 30px 0;
        overflow-y: auto;
        overflow: hidden;
        .left-title{
          padding: 0px 30px 20px 30px;
          font-size: 18px;
          font-weight: bold;
          color: #a7a7a7;
          border-bottom: 1px solid #f1f1f1;
        }
        .sender-item{
          display: flex;
          align-items: center;
          padding: 16px 36px;
          cursor: pointer;
          transition: all 0.3s;
          &.active{
            background-color: rgba(13, 23, 45, 0.06);
          }
          &:hover{
            background-color: rgba(13, 23, 45, 0.03);
          }
          .sender-item-right{
            width: calc(100% - 72px);
            display: flex;
            flex-direction: column;
            .mes-item-row{
              padding: 5px 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              color: #636363;
              .sender-id{
                padding-right: 12px;
                font-weight: bold;
                font-size: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .last-message-time{
                color: #b1b1b1;
                white-space: nowrap;
              }
              .last-message-text{
                padding-right: 12px;
                color: #afafaf;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .unread-message-num{
                background-color: #ff6625;
                border-radius: 4px;
                padding: 2px 10px;
                color: #ffffff;
                font-size: 12px;
              }
            }
          }
        }
      }
    
      .right{
        width: 65%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        .message-view{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
    
          .right-header{
            display: flex;
            align-items: center;
            border-bottom: 2px solid #dfdfdf;
            padding: 20px 40px;
            background-color: rgba(13, 23, 45, 0.06);
            .sender-item-right{
              color: #636363;
              .sender-id{
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
              }
              .sender-rols{
    
              }
            }
          }
    
          .interact-message-div{
            flex: 1;
            overflow-y: auto;
            border-bottom: 1px solid #f2f2f2;
            padding-top: 16px;
            scroll-behavior: smooth;
            .interact-row{
              padding: 12px 30px;
              width: 100%;
              display: flex;
              .interact-row-message{
                max-width: calc(70% - 100px);
                display: flex;
                flex-direction: column;
    
                .send-time{
                  color: #aaaaaa;
                }
                .send-text{
                  color: #636363;
                  background-color: #ebebeb;
                  padding: 12px 18px;
                  border-radius: 8px;
                  margin-top: 5px;
                  display: inline-block;.messages-page {
      background-color: #f9f9f9;
      height: 100%;
      width: 100%;
      padding: 5vh 5vw;
      display: flex;
      justify-content: space-around;
      background-image: linear-gradient(to top, #e6e9f0 0%, #dddde1 100%);
      .left{
        width: 30%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 16px;
        min-width: 280px;
        padding: 30px 0;
        overflow-y: auto;
        overflow: hidden;
        .left-title{
          padding: 0px 30px 20px 30px;
          font-size: 18px;
          font-weight: bold;
          color: #a7a7a7;
          border-bottom: 1px solid #f1f1f1;
        }
        .sender-item{
          display: flex;
          align-items: center;
          padding: 16px 36px;
          cursor: pointer;
          transition: all 0.3s;
          &.active{
            background-color: rgba(13, 23, 45, 0.06);
          }
          &:hover{
            background-color: rgba(13, 23, 45, 0.03);
          }
          .sender-item-right{
            width: calc(100% - 72px);
            display: flex;
            flex-direction: column;
            .mes-item-row{
              padding: 5px 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              color: #636363;
              .sender-id{
                padding-right: 12px;
                font-weight: bold;
                font-size: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .last-message-time{
                color: #b1b1b1;
                white-space: nowrap;
              }
              .last-message-text{
                padding-right: 12px;
                color: #afafaf;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .unread-message-num{
                background-color: #ff6625;
                border-radius: 4px;
                padding: 2px 10px;
                color: #ffffff;
                font-size: 12px;
              }
            }
          }
        }
      }
    
      .right{
        width: 65%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        .message-view{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
    
          .right-header{
            display: flex;
            align-items: center;
            border-bottom: 2px solid #dfdfdf;
            padding: 20px 40px;
            background-color: rgba(13, 23, 45, 0.06);
            .sender-item-right{
              color: #636363;
              .sender-id{
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
              }
              .sender-rols{
    
              }
            }
          }
    
          .interact-message-div{
            flex: 1;
            overflow-y: auto;
            border-bottom: 1px solid #f2f2f2;
            padding-top: 16px;
            scroll-behavior: smooth;
            .interact-row{
              padding: 12px 30px;
              width: 100%;
              display: flex;
              .interact-row-message{
                max-width: calc(70% - 100px);
                display: flex;
                flex-direction: column;
    
                .send-time{
                  color: #aaaaaa;
                }
                .send-text{
                  color: #636363;
                  background-color: #ebebeb;
                  padding: 12px 18px;
                  border-radius: 8px;
                  margin-top: 5px;
                  display: inline-block;
                  width: fit-content;
                  text-align: justify;
                  word-break: break-word;
                }
              }
              &.other-send{
                width: 90%;
                .interact-row-message{
                  align-items: flex-start;
                }
              }
              &.my-send{
                flex-direction: row-reverse;
                width: 90%;
                .interact-row-message{
                  align-items: flex-end;
                }
                .send-text{
                  color: #514e4e;
                  background-color: rgba(255, 108, 0, 0.6);
                }
              }
            }
          }
    
          .send-message-div{
            margin: 30px;
            border: 2px solid #e4e4e4;
            background-color: rgba(13, 23, 45, 0.03);
            height: 60px;
            border-radius: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .message-face{
              width: 50px;
              height: 50px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-image: url('~/static/inside_smile.png');
              margin-left: 8px;
              opacity: 0.8;
              cursor: pointer;
            }
            .message-input{
              height: 100%;
              flex: 1;
              background: none;
              font-size: 18px;
            }
            .send-btn{
              width: 120px;
              height: 100%;
              border-radius: 50px;
              background: #ff7a42;
              color: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              &:hover{
                background: #ff4c00;
              }
            }
          }
        }
      }
    }
    
    .sender-avatar{
      border: 2px solid rgba(169, 169, 169, 0.16);
      margin-right: 12px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.interact{
        margin-left: 12px;
      }
    }
                }
              }
              &.my-send{
                flex-direction: row-reverse;
                .interact-row-message{
                  align-items: flex-end;
                }
                .send-text{
                  color: #514e4e;
                  background-color: rgba(255, 108, 0, 0.6);
                }
              }
            }
          }
    
          .send-message-div{
            margin: 30px;
            border: 2px solid #e4e4e4;
            background-color: rgba(13, 23, 45, 0.03);
            height: 60px;
            border-radius: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .message-face{
              width: 50px;
              height: 50px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-image: url('~/static/inside_smile.png');
              margin-left: 8px;
              opacity: 0.8;
              cursor: pointer;
            }
            .message-input{
              height: 100%;
              flex: 1;
              background: none;
              font-size: 18px;
            }
            .send-btn{
              width: 120px;
              height: 100%;
              border-radius: 50px;
              background: #ff7a42;
              color: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              &:hover{
                background: #ff4c00;
              }
            }
          }
        }
      }
    }
    
    .sender-avatar{
      border: 2px solid rgba(169, 169, 169, 0.16);
      margin-right: 12px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.interact{
        margin-left: 12px;
      }
    }
          display: flex;
          flex-direction: column;
          justify-content: space-between;
    
          .right-header{
            display: flex;
            align-items: center;
            border-bottom: 2px solid #dfdfdf;
            padding: 20px 40px;
            background-color: rgba(13, 23, 45, 0.06);
            .sender-item-right{
              color: #636363;
              .sender-id{
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
              }
              .sender-rols{
    
              }
            }
          }
    
          .interact-message-div{
            flex: 1;
            overflow-y: auto;
            border-bottom: 1px solid #f2f2f2;
            padding-top: 16px;
            scroll-behavior: smooth;
            .interact-row{
              padding: 12px 30px;
              width: 100%;
              display: flex;
              .interact-row-message{
                max-width: calc(70% - 100px);
                display: flex;
                flex-direction: column;
    
                .send-time{
                  color: #aaaaaa;
                }
                .send-text{
                  color: #636363;
                  background-color: #ebebeb;
                  padding: 12px 18px;
                  border-radius: 8px;
                  margin-top: 5px;
                  display: inline-block;
                  width: fit-content;
                  text-align: justify;
                  word-break: break-word;
                }
              }
              &.other-send{
                width: 90%;
                .interact-row-message{
                  align-items: flex-start;
                }
              }
              &.my-send{
                width: 90%;
                flex-direction: row-reverse;
                .interact-row-message{
                  align-items: flex-end;
                }
                .send-text{
                  color: #514e4e;
                  background-color: rgba(255, 108, 0, 0.6);
                }
              }
            }
          }
    
          .send-message-div{
            margin: 30px;
            border: 2px solid #e4e4e4;
            background-color: rgba(13, 23, 45, 0.03);
            height: 60px;
            border-radius: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .message-face{
              width: 50px;
              height: 50px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-image: url('~/static/inside_smile.png');
              margin-left: 8px;
              opacity: 0.8;
              cursor: pointer;
            }
            .message-input{
              height: 100%;
              flex: 1;
              background: none;
              font-size: 18px;
            }
            .send-btn{
              width: 120px;
              height: 100%;
              border-radius: 50px;
              background: #ff7a42;
              color: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              &:hover{
                background: #ff4c00;
              }
            }
          }
        }
      }
    }
    
    .sender-avatar{
      border: 2px solid rgba(169, 169, 169, 0.16);
      margin-right: 12px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.interact{
        margin-left: 12px;
      }
    }
    </style>
  